<template>
  <div class="DashBoard_Root">
    <div class="Shower_One">
      <el-statistic title="注册用户数量" :value="ShowUserCount"/>
      <el-statistic title="已有视频总数" :value="ShowVideoCount"/>
      <el-statistic title="待审核视频数" :value="ShowExamCount"/>
      <el-statistic title="用户动态数" :value="ShowTrendCount"/>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from 'vue'
import {TransitionPresets, useTransition} from '@vueuse/core'
import {GetStatics} from '../../Net/netApi.js'

const durationTime=800
const transitionType=TransitionPresets.easeInOutCubic

let userCount = ref(0)
let videoCount = ref(0)
let examVideo = ref(0)
let trendCount = ref(0)

onMounted(() => {
  GetAllStatics()
})

//#region 过渡动画，需要可以复制添加
const ShowUserCount = useTransition(userCount, {
  duration: durationTime,
  transition: transitionType,
})

const ShowVideoCount = useTransition(videoCount, {
  duration: durationTime,
  transition: transitionType,
})

const ShowExamCount = useTransition(examVideo, {
  duration: durationTime,
  transition: transitionType,
})

const ShowTrendCount = useTransition(trendCount, {
  duration: durationTime,
  transition: transitionType,
})
//#endregion

//获取数据
const GetAllStatics = async () => {
  const res = await GetStatics()
  if (res.code == 200) {
    //TODO:自行解构，这里只是测试
    let {user_count, video_count, exam_video, trend_count} = res.data
    userCount.value=user_count
    videoCount.value=video_count
    examVideo.value=exam_video
    trendCount.value=trend_count
  }
}


</script>

<style lang='less' scoped>
.DashBoard_Root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
  padding: 1rem;

  .Shower_One {
    margin: auto;
    width: 85%;
    height: 15vh;
    border: 1px solid #ccc;
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>